<template>
  <div class="bind-main-page">
    <svg-icon icon-class="close" class="close-btn" @click="closeWindow()" />
    <BindWxPhone @completeBind="completeBind" />
  </div>
</template>
<script lang="ts">
import BindWxPhone from './bind-wx-phone.vue'
import { invokeAPi, invokeAsyncAPi, registerInformApi } from '@/xz-fn'
import { userAppStore } from '@/stores/user'
import { mapState } from 'pinia';
export default {
  name: 'BindUser',
  components: {
    BindWxPhone
  },
  data() {
    return {
      mainID: 0,
      winID: 0
    }
  },
  computed: {
    ...mapState(userAppStore, ['hasLogin'])
  },
  watch: {
    hasLogin: {
      handler(val) {
        if (val) {
          userAppStore().getUserInfo()
        }
      },
      immediate: true
    }
  },
  async mounted() {
    invokeAPi("jsMsg_SetWndDragPos", [
      {
        left: 0,
        top: 0,
        right: 246,
        bottom: 30
      }
    ]);

    this.getMessageID()
    this.registerOb()

    invokeAPi("xz_page_load_finished", "XZUserCenterBind");
  },
  methods: {
    registerOb() {
      registerInformApi('Notify_WebMessage', (id: number, payload: any) => {
        if (id === this.winID && payload) {
          let _payload

          try {
            _payload = typeof payload === 'string' ? JSON.parse(payload) : payload
          } catch (error) {
            _payload = null
          }

          if (_payload) {
            switch (_payload.action) {
              case 'focus':
                invokeAPi('jsMsg_SetWndStatus', 6)
                break;
              default:
                break;
            }
          }
        }
      })
    },
    getMessageID() {
      invokeAsyncAPi('jsMsg_GetWndInfo').then((res: any) => {
        if (res.payload) {
          const _payload = JSON.parse(res.payload)

          if (_payload.mainID) {
            this.mainID = _payload.mainID
          }
        }
      })

      invokeAsyncAPi('jsMsg_GetWndID').then((id: any) => {
        this.winID = id
      })
    },
    async completeBind () {
      invokeAPi('fq_NotifyWebMessageEx', '', {
        action: 'bindSuccess'
      })

      //  绑定完成
      this.closeWindow(1)
    },
    closeWindow (status = 0) {
      invokeAPi('fq_NotifyWebMessageEx', this.mainID, {
        action: 'close-bindUser'
      })
      invokeAPi('jsMsg_SetWndStatus', 0, true, status)
    }
  }
}
</script>
<style lang="scss" scoped>
.bind-main-page {
  position: relative;
  width: 278px;
  height: 332px;
  padding: 30px 16px 20px;
  color: rgba(47, 60, 69, 1);
  background: linear-gradient(180deg, #F5EFFF 0%, #FFFFFF 33.13%);
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
  border-radius: 6px;
  border: 1px solid rgba(131, 47, 255, 0.2);
  box-sizing: border-box;

  .close-btn {
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 22px;
    font-weight: bold;
    color: #39426E;
    cursor: pointer;
  }
}
</style>
